<html>
<head>
<title>Test Hidden Message</title>

<style type="text/css">
   div.hide { display: none; margin-left: auto; margin-right: auto; }
   div.show { display: block; margin-left: auto; margin-right: auto; }
   #Container { background: #f00; color: #fff; width: 300px; height: 300px; padding-top: 100px; text-align: center; font: bold 2em Verdana, Helvetica, sans-serif; }

</style>

<script type="text/javascript">
function show(divId)
{
   var divContainer = document.getElementById("Container");
   var divArr = divContainer.getElementsByTagName("div");
   for (var i = 0; i < divArr.length; i++)
   {
      if ( divArr[i].id == divId )
      {
         divArr[i].className = "show";
      }
      else
      {
         divArr[i].className = "hide";
      }
   }
}
</script>
</head>

<body>
<div id="Container">
   <div id="successError" class="hide">Success!</div><div id="failureError" class="hide">Failure!</div>
</div>
<form style="width: 300px; text-align: center;">
<p>Click on a button to display a message.</p>
   <input type="button" name="success" value="Success" onclick="show( this.name + 'Error' );" />
   <input type="button" name="failure" value="Failure" onclick="show( this.name + 'Error' );" />
</form>
</body>
</html>
